
<template>
  <div class="submit">
    <MyHead title="发布">
      <div class="tis" @click="gotopage('/myms')">
        <van-icon name="label-o" size="18" />
        <span>我的面试题</span>
      </div>
    </MyHead>
    <div class="stpes">
      <van-steps :active="active">
        <van-step v-for="(item, index) in steps" :key="index">{{
          item.title
        }}</van-step>
      </van-steps>
    </div>
    <div class="form">
      <div class="form-box" v-if="active == 0">
        <van-form ref="form">
          <van-field
            v-model="form.title"
            name="title"
            label="面试标题"
            placeholder="面试标题"
            :rules="[{ required: true, message: '请填写' }]"
            center
            clearable
            required
          />
          <van-field
            v-model="form.campany"
            name="campany"
            label="面试公司"
            placeholder="面试公司"
            :rules="[{ required: true, message: '请填写' }]"
            center
            clearable
            required
          />
          <van-field
            v-model="form.address"
            name="address"
            label="面试地点"
            placeholder="面试地点"
            :rules="[{ required: true, message: '请填写' }]"
            center
            clearable
            required
          />
          <van-field
            readonly
            clickable
            name="date"
            :value="form.date"
            label="面试时间"
            placeholder="面试时间"
            @click="showPicker = true"
            required
            :rules="[{ required: true, message: '请选择' }]"
          />
          <van-field
            readonly
            clickable
            name="level"
            :value="form.level"
            label="面试等级"
            placeholder="面试等级"
            @click="show = true"
            required
            :rules="[{ required: true, message: '请选择' }]"
          />
          <van-popup v-model="show" position="bottom">
            <van-picker
              show-toolbar
              :columns="levels"
              @confirm="onChooseLevel"
              @cancel="show = false"
              title="选择面试难度"
            />
          </van-popup>
          <van-calendar
            title="选择面试时间"
            :min-date="minDate"
            v-model="showPicker"
            @confirm="onConfirm"
          />
        </van-form>
      </div>
      <div class="page-two" v-if="active == 1">
        <div class="box1">
          <h2 class="title">1.面试属性(最多6个)</h2>
          <div class="tags mt10">
            <van-tag
              class="tag"
              @click="chooseOne(item, index)"
              :color="item.check ? 'orange' : '#1989fa'"
              v-for="(item, index) in tagList"
              size="large"
              :key="index"
              round
              type="primary"
              >{{ item.label }}</van-tag
            >
          </div>
        </div>
        <div class="box1 mt10">
          <h2 class="title">2.面试图片(最多9张)</h2>
          <div class="picbox">
            <van-uploader
              @delete="deleteOne"
              v-model="fileList"
              :after-read="afterRead"
              multiple
              :max-count="9"
            />
          </div>
        </div>
        <div class="box1 mt10">
          <h2 class="title">3.面试录音</h2>
          <div class="mt10" v-if="audioSrc">
            <audio :src="audioSrc.replace(/public/, baseURL)" controls></audio>
          </div>
          <UploadFile @getfilepath="getAudioPath">
            <div class="mt10" style="width: 160px">
              <van-button type="warning" block round
                >上传面试录音<van-icon name="back-top"
              /></van-button>
            </div>
          </UploadFile>
        </div>
      </div>
      <div class="page-three" v-if="active == 2">
        <div class="box1 mt10">
          <h2 class="title">1.面试问题</h2>
          <van-cell-group>
            <van-cell
              :title="'第' + (index + 1) + '题'"
              v-for="(item, index) in quesList"
              :key="index"
              icon="label-o"
              :value="item.value"
            />
          </van-cell-group>
          <van-field
            v-model="ques"
            type="text"
            class="text"
            placeholder="请输入面试题目"
          />
          <div class="mt10">
            <van-button
              :disabled="!ques"
              type="info"
              block
              round
              @click="addToQuesList"
              >发布面试题<van-icon name="add-o"></van-icon
            ></van-button>
          </div>
          <div class="box1 mt10">
            <h2 class="title">2.面试总结</h2>
            <div class="mt10">
              <van-field
                v-model="content"
                rows="7"
                autosize
                type="textarea"
                maxlength="400"
                placeholder="输入面试心得"
                show-word-limit
                class="textarea"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btns">
      <van-button
        type="info"
        class="m10"
        v-if="active != steps.length - 1"
        @click="gotonext"
        >下一步</van-button
      >
      <van-button
        type="primary"
        class="m10"
        v-if="active != 0"
        @click="gotoprev"
        >上一步</van-button
      >
      <van-button
        type="warning"
        class="m10"
        v-if="active == steps.length - 1"
        @click="todoAddMs"
        >发布题目</van-button
      >
    </div>
  </div>
</template>

<script>
import { todouplodafile, todoaddmainshi } from "@/api/api";
export default {
  data() {
    return {
      active: 0,
      steps: [
        { title: "1.面试的公司信息" },
        { title: "2.面试的具体信息" },
        { title: "3.面试总结" },
      ],
      form: {},
      minDate: new Date(2020, 0, 1),
      showPicker: false,
      show: false,
      fileList: [],
      imgs: [],
      audioSrc: "",
      tags: [],
      content: "",
      quesList: [],
      ques: "",
    };
  },
  methods: {
    async todoAddMs() {
      if (this.quesList.length == 0) {
        this.ShowToast("请至少提交一个面试题目");
        return;
      }
      if (this.content == "") {
        this.ShowToast("请书写面试心得");
        return;
      }
      let res = await todoaddmainshi({
        tags: this.tags,
        content: this.content,
        imgs: this.imgs,
        ...this.form,
        audioSrc: this.audioSrc,
        quesList: this.quesList,
        likes: 0,
        collects: 0,
        pings: 0,
      });
      if (res.code == 200) {
        ShowSuccess("发布成功");
        this.gotopage("/myms");
      }
    },
    addToQuesList() {
      this.quesList.push({
        value: this.ques,
        label: "ques_" + this.quesList.length,
      });
      this.ques = "";
    },
    getAudioPath(path) {
      this.audioSrc = path;
    },
    deleteOne(file, payload) {
      this.imgs.splice(payload.index, 1);
    },
    async afterRead(file) {
      console.log(file);
      let data = new FormData();
      data.append("file", file.file);
      let res = await todouplodafile(data);
      if (res.code == 200) {
        this.imgs.push({
          url: res.path,
        });
      }
    },
    chooseOne(item, index) {
      if (this.tagList.filter((item) => item.check).length > 5 && !item.check) {
        this.ShowToast("最多选择6个");
        return false;
      }
      this.$set(this.tagList, index, { ...item, check: !item.check });
    },
    onChooseLevel(value) {
      this.show = false;
      this.$set(this.form, "level", value);
    },
    onConfirm(date) {
      this.showPicker = false;
      this.$set(this.form, "date", this.formatDate(date));
    },
    gotonext() {
      if (this.active == 0) {
        this.$refs.form
          .validate()
          .then((valid) => {
            console.log(this.form);
            this.active += 1;
          })
          .catch((err) => {
            this.ShowToast("请填写表单数据");
          });
      } else if (this.active == 1) {
        this.tags = this.tagList.filter((item) => item.check);
        if (this.tags.length == 0) {
          this.ShowToast("至少选择一个面试属性");
          return;
        }
        if (this.imgs.length == 0) {
          this.ShowToast("至少选择一张面试图片");
          return;
        }
        this.active += 1;
      }
    },
    gotoprev() {
      this.active -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  border: 0.5px solid #ddd;
  border-radius: 10px;
  margin-top: 10px;
}
.textarea {
  border: 0.5px solid #ddd;
  border-radius: 10px;
}
.tag {
  margin: 3px 3px 0 0;
}
.submit {
  width: 100%;
  min-height: calc(100vh - 50px);
  position: relative;
  .form {
    margin-top: 25px;
    padding: 0 10px;
  }
  .btns {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    width: 100%;
    .m10 {
      margin: 0 10px !important;
    }
  }
}
.tis {
  color: #1989fa;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-top: 3px;
  }
}
</style>
